<script setup>
import { computed, ref } from 'vue';

// Mock数据（添加type字段区分买卖方向）
const orderData = ref([
  { type: 'ask', price: 3.994, remaining: 458.6, original: 2270 },
  { type: 'ask', price: 3.993, remaining: 418.1, original: 1810 },
  { type: 'ask', price: 3.989, remaining: 187.4, original: 187.4 },
]);

const sellData = ref([
  { type: 'bid', price: 3.992, remaining: 401.5, original: 1390 },
  { type: 'bid', price: 3.991, remaining: 550.8, original: 990 },
  { type: 'bid', price: 3.99, remaining: 378.8, original: 566.2 },
]);

// 进度条样式计算
const progressStyle = computed(() => (item) => {
  const percentage = Math.min((item.remaining / item.original) * 100, 100);

  // 根据买卖方向设置颜色
  // const color = item.type === 'bid' ? '#16a34a' : '#dc2626';
  const color = item.type === 'bid' ? '#2EBD85' : '#F6465D';

  return {
    width: `${percentage}%`,
    background: color,
    right: 0, // 从右侧开始
  };
});
</script>

<template>
  <div style="color: aqua">
    <p class="hidden !text-[20px]">
      <svg
        class="bn-svg arrow-icon status-sell"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        style=""
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 20.999l7.071-7.071-1.768-1.768-4.054 4.055V2.998h-2.5v13.216L6.696 12.16l-1.768 1.768 7.07 7.071H12z"
          fill="currentColor"
        />
      </svg>

      <svg
        class="bn-svg arrow-icon status-green text-[16px]"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        style="transform: rotate(180deg)"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 20.999l7.071-7.071-1.768-1.768-4.054 4.055V2.998h-2.5v13.216L6.696 12.16l-1.768 1.768 7.07 7.071H12z"
          fill="currentColor"
        />
      </svg>
    </p>
  </div>
  <div class="order-book">
    <!-- 表头 -->
    <div class="row header">
      <div class="header-cell text-left">价格</div>
      <div class="header-cell text-right">剩余量</div>
      <div class="header-cell text-right">原始量</div>
    </div>

    <!-- 数据行 -->
    <div v-for="(item, index) in orderData" :key="index" class="row">
      <!-- 颜色条 -->
      <div class="progress-bar" :style="progressStyle(item)"></div>

      <!-- 数据列 -->
      <div
        class="cell text-left"
        :style="{ color: item.type === 'bid' ? '#2EBD85' : '#E33B54' }"
      >
        {{ item.price.toFixed(3) }}
      </div>
      <div class="cell text-right">{{ item.remaining.toFixed(1) }}</div>
      <div class="cell text-right">{{ item.original.toFixed(1) }}</div>
    </div>
    <p class="m-10"></p>
    <!-- <p class="flex items-center gap-2 p-4">
      <span class="text-[20px] text-[#2EBD85]">0.2398</span>
      <svg
        class="bn-svg arrow-icon status-green text-[16px] text-[#2EBD85]"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        style="transform: rotate(180deg)"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M12 20.999l7.071-7.071-1.768-1.768-4.054 4.055V2.998h-2.5v13.216L6.696 12.16l-1.768 1.768 7.07 7.071H12z"
          fill="currentColor"
        />
      </svg>
      <span class="text-[12px] text-[#707A8A]">0.23678</span>
    </p> -->

    <div v-for="(item, index) in sellData" :key="index" class="row">
      <!-- 颜色条 -->
      <div class="progress-bar" :style="progressStyle(item)"></div>

      <!-- 数据列 -->
      <div
        class="cell text-left"
        :style="{ color: item.type === 'bid' ? '#2EBD85' : '#E33B54' }"
      >
        {{ item.price.toFixed(3) }}
      </div>
      <div class="cell text-right">{{ item.remaining.toFixed(1) }}</div>
      <div class="cell text-right">{{ item.original.toFixed(1) }}</div>
    </div>
  </div>
</template>

<style scoped>
.order-book {
  width: 100%;

  /* border: 1px solid hsl(var(--border)); */
}

.row {
  /* padding: 0 8px; */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
  background: var(--el-card-bg-color);
}

.row.header {
  font-weight: 500;
  line-height: 35px;

  /* border-bottom: 1px solid hsl(var(--border)); */
  color: var(--el-text-color-secondary);
  background: var(--el-card-bg-color);
}

.header-cell {
  width:;

  /* padding: 10px; */
  color: var(--el-table-header-text-color);
}

.progress-bar {
  position: absolute;
  top: 0;
  z-index: 0;
  height: 100%;
  opacity: 0.2;
  transition: width 0.3s ease;
}

.cell {
  position: relative;
  z-index: 1;

  /* padding: 10px; */
  font-weight: 600;
  line-height: 35px;
}

.bn-svg {
  width: 1em;
  height: 1em;
  font-size: inherit;
}
</style>
